<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性的getter和setter</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    {{fullName}}
  </div>
  <script>
    var vm = new Vue({
      el: '#root',
      data: {
       firstName: 'yan',
       lastName: 'ming'
      },
      computed: {
        fullName: {
          // 获取值
          // 通过其他值获得一个新值 
          get: function() {
            return this.fullName = this.firstName + ' ' + this.lastName
          },
          // 设置值
          // 通过设置一个值，改变和他关联的值，改变和他关联的值的时候，
          // 又会引起fullName的重新计算，页面值改变
          set: function(value) {
            // console.log(value)
            var arr = value.split(' '); // 将value值用空格隔开，变成数组
            this.firstName = arr[0];
            this.lastName = arr[1]
          }
        }
      }
    })
    
  </script>
</body>
</html>